<template>
    <div>
        <el-row>
            <el-col :span="24">
                <el-steps :active="step" finish-status="success" align-center>
                    <el-step title="基本信息"></el-step>
                    <el-step title="添加巡检点"></el-step>
                    <el-step title="添加巡检项"></el-step>
                    <el-step title="保存完成"></el-step>
                </el-steps>
            </el-col>
            <el-col :span="24" v-show="step === 0">
                <el-card class="box-card" style="width:80%;margin:20px auto">
                    <el-form ref="routeBaseForm" label-width="200px" label-position="right" :model="routeInfo">
                        <el-form-item label="巡检路线名称：" prop="name">
                            <el-input style="width: 220px" v-model="routeInfo.name" placeholder="输入巡检路线名称"></el-input>
                        </el-form-item>
                        <el-form-item label="每隔：" prop="formSpan">
                            <el-input style="width: 220px" v-model.number="routeInfo.formSpan"></el-input>
                            <el-select style="margin-left: 20px" v-model="routeInfo.unit">
                                <el-option label="小时" :value="1"></el-option>
                                <el-option label="天" :value="2"></el-option>
                                <el-option label="周" :value="3"></el-option>
                                <el-option label="月" :value="4"></el-option>
                                <el-option label="年" :value="5"></el-option>
                            </el-select>
                            <span style="margin-left: 20px">生成巡检单</span>
                        </el-form-item>
                        <el-form-item label="计划下次执行巡检时间为：" prop="nextBeginTime">
                            <el-date-picker value-format="yyyy-MM-dd" v-model="routeInfo.nextBeginTime" type="date" placeholder="选择日期时间" align="right"></el-date-picker>
                        </el-form-item>
                        <el-form-item label="生效时间范围：" prop="validTimeRange">
                            <el-time-picker is-range value-format="HH:mm:ss" v-model="routeInfo.validTimeRange" range-separator="至"
                                            start-placeholder="开始时间" end-placeholder="结束时间" placeholder="选择时间范围">
                            </el-time-picker>
                        </el-form-item>
                        <el-form-item label="巡检计划失效时间：" prop="expiration">
                            <el-date-picker value-format="yyyy-MM-dd" v-model="routeInfo.expiration" type="date" placeholder="选择日期时间"></el-date-picker>
                            <el-button style="margin-left: 20px">清除</el-button>
                        </el-form-item>
                        <el-form-item label="巡检执行人：" prop="executor">
                            <el-select value="" style="width: 220px" v-model="routeInfo.executor">
                                <el-option :label="user.username" :value="user.userId" v-for="user in users" :key="user.userId"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="物业实体信息：" prop="infoId">
                            <el-select value="" style="width: 220px" v-model="routeInfo.infoId">
                                <el-option :label="p.name" :value="p.infoId" v-for="p in properties" :key="p.infoId"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="是否需要巡检复核人？" prop="spuDescription">
                            <el-tooltip class="item" effect="light" content="如果需要，巡检单操作完成后，流程会提交至指定的物业实体经理进行复核。" placement="right-start">
                                <i class="el-icon-question" />
                            </el-tooltip>
                            <el-checkbox v-model="routeInfo.needReviewed"></el-checkbox>
                            <span v-show="routeInfo.needReviewed" style="margin-left: 20px">复核人：</span>
                            <el-select v-show="routeInfo.needReviewed" v-model="routeInfo.reviewer">
                                <el-option :label="user.username" :value="user.userId" v-for="user in users" :key="user.userId"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="巡检单未执行提醒？" prop="spuDescription">
                            <el-tooltip class="item" effect="light" content="该提醒为循环提醒，直至巡检单执行" placement="right-start">
                                <i class="el-icon-question" />
                            </el-tooltip>
                            <el-checkbox name="type" v-model="routeInfo.isReminder"></el-checkbox>
                        </el-form-item>
                        <el-form-item label="不允许取消？" prop="spuDescription">
                            <el-tooltip class="item" effect="light" content="如果勾选，则此巡检单不可强行取消" placement="right-start">
                                <i class="el-icon-question"/>
                            </el-tooltip>
                            <el-checkbox name="type" v-model="routeInfo.noCancel"></el-checkbox>
                        </el-form-item>
                        <el-form-item label="巡检点到达延误提醒？" prop="spuDescription">
                            <el-tooltip class="item" effect="light" placement="right-start"
                                        content="勾选后，如发生超出设定时间还未到达下一个巡检点的情况（警报有效，同生成警报信息），发送APP消息提醒给物业实体经理。">
                                <i class="el-icon-question"/>
                            </el-tooltip>
                            <el-checkbox name="type" v-model="routeInfo.isDelayAlert"></el-checkbox>
                            <span v-show="routeInfo.isDelayAlert" style="margin-left: 20px">延误提醒时间：</span>
                            <el-input v-show="routeInfo.isDelayAlert" style="width: 220px" v-model.number="routeInfo.delayAlertTime"></el-input>
                        </el-form-item>
                        <el-form-item label="巡检路线须按照巡检点次序？" prop="spuDescription">
                            <el-tooltip class="item" effect="light" content="如勾选，则需要按照巡检点的序号来依次完成巡检。" placement="right-start">
                                <i class="el-icon-question"/>
                            </el-tooltip>
                            <el-checkbox name="type" v-model="routeInfo.isOrder"></el-checkbox>
                        </el-form-item>
                        <el-form-item label-width="0" style="text-align: center">
                            <el-button type="success" @click="collectBaseRouteInfo">下一步：设置巡检点</el-button>
                        </el-form-item>
                    </el-form>
                </el-card>
            </el-col>
            <el-col :span="24" v-show="step === 1">
                <el-card class="box-card" style="width:80%;margin:20px auto">
                    <div slot="header" class="clearfix">
                        <el-button type="primary" @click="addPoint">添加巡检点</el-button>
                    </div>
                    <el-table :data="tableData" style="width: 100%" border>
                        <el-table-column prop="name" label="巡检点名称" width="180" align="center"></el-table-column>
                        <el-table-column prop="pointAlpha" label="巡检点编号" width="180" align="center"></el-table-column>
                        <el-table-column prop="markType" label="标识类型" align="center">
                            <template slot-scope="scope">
                                <div slot="reference" class="name-wrapper">
                                    <el-tag size="medium" style="color:#409EFF">{{scope.row.markType | tranMarkType}}</el-tag>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="isScan" label="需要扫描开启" width="180" align="center">
                            <template slot-scope="scope">
                                <el-switch v-model="scope.row.isScan" active-color="#13ce66" inactive-color="#ff4949" :active-value="1" :inactive-value="0"></el-switch>
                            </template>
                        </el-table-column>
                        <el-table-column prop="isEffective" label="是否有效" align="center">
                            <template slot-scope="scope">
                                <el-switch v-model="scope.row.isEffective" active-color="#13ce66" inactive-color="#ff4949" :active-value="1" :inactive-value="0"></el-switch>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" fixed="right" header-align="center" align="center">
                            <template slot-scope="scope">
                                <el-button type="danger" size="small" @click="removePoint(scope.row.id)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination style="margin-top: 60px" :current-page="1" :page-sizes="[10, 20, 50, 100]" :page-size="12" :total="1" layout="total, sizes, prev, pager, next, jumper">
                    </el-pagination>
                    <div style="text-align: center">
                        <el-button type="primary" @click="step--">上一步</el-button>
                        <el-button type="success" @click="step++">下一步：设置巡检项</el-button>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="24" v-show="step === 2">
                <item-list :pointData="tableData">
                    <div slot="button" style="text-align: center;margin-top: 15px" slot-scope="items">
                        <el-button type="primary" @click="step--">上一步</el-button>
                        <el-button type="success" @click="collectItemInfo(items)">下一步：保存巡检计划</el-button>
                    </div>
                </item-list>
            </el-col>
            <el-col :span="24" v-show="step === 3">
                <el-card class="box-card" style="width:80%;margin:20px auto">
                    <div style="text-align: center">
                        <h1>保存成功</h1>
                        <el-button type="primary">继续添加</el-button>
                    </div>
                </el-card>
            </el-col>
        </el-row>
        <point-add ref="pointList" v-if="PointListVisible" @refresh="getDataList"></point-add>
    </div>
</template>

<script>
    import axios from 'axios'
    import ItemList from './item-list'
    import PointAdd from "./point-add";

    export default {
        name: "create-route",
        components: {
            PointAdd,
            ItemList
        },
        data() {
            return {
                step: 0,
                routeInfo: {
                    name: '',
                    formSpan: '',
                    unit: '',
                    nextBeginTime: '',
                    validTimeRange: '',
                    expiration: '',
                    executor: '',
                    needReviewed: false,
                    reviewer: '',
                    isReminder: false,
                    noCancel: false,
                    isDelayAlert: false,
                    delayAlertTime: '',
                    isOrder: false,
                    infoId: '',
                    status: 0
                },
                users: [],
                properties: [],
                tableData: [],
                PointListVisible: false,
                items: {}
            }
        },
        methods: {
            init() {
            },
            collectBaseRouteInfo() {
                if (!this.routeInfo.needReviewed) {
                    this.routeInfo.reviewer = '';
                }
                if (!this.routeInfo.isDelayAlert) {
                    this.routeInfo.delayAlertTime = '';
                }
                console.log(this.routeInfo);
                this.step++;
            },
            getDataList(point) {
                this.tableData.push(point);
            },
            addPoint() {
                this.PointListVisible = true;
                this.$nextTick(() => {
                    this.$refs.pointList.init(this.tableData);
                });
            },
            removePoint(id) {
                for (let i = 0; i < this.tableData.length; i++) {
                    let point = this.tableData[i];
                    if (point.id === id) {
                        this.tableData.splice(i, 1);
                    }
                }
                this.showMessage('移除巡检点成功');
            },
            showMessage(msg) {
                this.$message({
                    message: msg,
                    type: 'success',
                    duration: 1500,
                });
            },
            collectItemInfo(items) {
                if (this.routeInfo.name.length > 0) {
                    this.routeInfo.isDelayAlert = this.routeInfo.isDelayAlert ? 1 : 0;
                    this.routeInfo.isOrder = this.routeInfo.isOrder ? 1 : 0;
                    this.routeInfo.isReminder = this.routeInfo.isReminder ? 1 : 0;
                    this.routeInfo.needReviewed = this.routeInfo.needReviewed ? 1 : 0;
                    this.routeInfo.noCancel = this.routeInfo.noCancel ? 1 : 0;

                    this.items = items.items;
                    let route = {
                        routeInfo: this.routeInfo,
                        points: this.tableData,
                        items: this.items
                    };
                    console.log(route);
                    axios.post('http://gulimall.com/api/inspection/route/saveRoute', {
                        ...route
                    }).then(
                        response => {this.showMessage('保存巡检计划成功');},
                        error => {this.showMessage('保存巡检计划失败');}
                    );
                }
                this.step++;
            }
        },
        mounted() {
            axios.get('http://gulimall.com/api/inspection/route/users').then(
                response => {
                    this.users = response.data.data;
                },
                error => {console.log('获取用户信息失败');}
            );
            axios.get('http://gulimall.com/api/inspection/property/list').then(
                response => {
                    this.properties = response.data.page.list;
                },
                error => {console.log('获取物业实体信息失败');}
            );
        },
        filters: {
            tranMarkType: function (type) {
                if (type === 1) return '二维码';
                if (type === 2) return '蓝牙';
                if (type === 3) return 'NFC';
            }
        }
    }
</script>

<style scoped>
    .el-card__body {
        text-align: center;
    }
</style>
